<template>
  <UserInfoComp></UserInfoComp>
  <hr />
  <div class="menus">
    <div v-for="d in menus" @click="toPage(d.path)">
      <div>
        <img :src="d.icon" alt="" />
      </div>
      <div>{{ d.title }}</div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
import UserInfoComp from '../components/UserInfoComp.vue';

const router = useRouter();

const menus = [
  {
    title: '新闻管理',
    icon: '/images/news.svg',
    path: '/news',
  },
  {
    title: '用户登录',
    icon: '/images/login.svg',
    path: '/user/login',
  },
  {
    title: '成语小游戏',
    icon: '/images/idiom.svg',
    path: '/study/idiomgame',
  },
];

const toPage = (path) => {
  router.push(path);
};
</script>

<style scoped>
.menus {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding: 1rem;
  text-align: center;
}

.menus > div {
  width: 7rem;
  cursor: pointer;
}

.menus > div > div:first-of-type {
  padding: 1rem;
}

.menus > div:hover img {
  transform: scale(1.2);
}

.menus img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.5s;
}
</style>
